<template>
  <content100>
    <card100>
      <div slot="header" class="card-header">
        <span>日志</span>
        <span style=" width: 260px">
          <el-input-number v-model="rowsNum" size="small" :min="1" label="行数" />
          <el-button type="primary" style="float:right" class="btn" icon="el-icon-caret-right" @click="handleStart">启动查看日志</el-button>
        </span>
      </div>
      <ul>
        <li v-for="(log,i) in logList" :key="i">{{ log }}</li>
      </ul>
    </card100>
  </content100>
</template>
<script>
import { startWatch, readLogs } from '@/svc/log'
export default {
  name: 'Log',
  data() {
    return {
      rowsNum: 100,
      timeout: '',
      logList: []
    }
  },
  beforeDestroy() {
    clearTimeout(this.timeout)
  },
  methods: {
    handleStart() {
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
      startWatch.fn(this, this.rowsNum).then(res => {
        this.getLogs()
      })
    },
    getLogs() {
      readLogs.fn(this).then(res => {
        this.logList.push(...res)
        this.timeout = setTimeout(this.getLogs, 1000)
      })
    }
  }
}
export const PageInfo = {
  title: '查看日志',
  icon: 'documentation',
  apis: [startWatch.api, readLogs.api]
}
</script>
